import Header from './component/Header/Header'
import Wrap from './component/Wrap/Wrap'
import MyInterview from './component/MyInterview/MyInterview'
import Home from './page/Home/Home'
import LogAndRe from './page/LogAndRe/LogAndRe'
import { BrowserRouter, Link, NavLink, Route, Switch, Redirect } from 'react-router-dom';
import './App.css';
import React, { Component } from 'react';
import client from './util/client'

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      useremail: '',
      client: client(),
    }
  }

  handleEmail = (useremail) => {
    this.setState({
      useremail: useremail
    })
  }

  deleteEmail = () => {
    this.setState({useremail: ''})
  }

  render () {
    const {useremail} = this.state;
    return (
      <div id="app">
        <BrowserRouter>
          <Header deleteEmail={this.deleteEmail} useremail={useremail}/>

          <Switch>
            <Route path="/home"
              render={
                props => (
                  <Home
                    useremail={this.state.useremail}
                    routeProps={props}
                  />
                )
              }
            />
            <Route path="/interview-room"
              render={
                props => (
                  <Wrap
                    client={this.state.client}
                    routeProps={props}
                  />
                )
              }
            >
            </Route>

            <Route path="/logAndRe"
              render={
                props => (
                  <LogAndRe
                    client={this.state.client}
                    handleEmail={this.handleEmail}
                    routeProps={props}
                  />
                )
              }
            >
            </Route>
            <Redirect to="/home" />
          </Switch>
        </BrowserRouter>
        <MyInterview />
      </div >
    )
  }
}

export default App;

